<template>
    <div class="deleteProfile">
        <div class="moduleHead">
            <router-link v-show="!deleteSuccess" :to="{ name: 'privacy' }">
                <span class="back"></span>
            </router-link>
            <span> {{language.deleteProfile_title}} </span>
        </div>
        <div class="body">
            <div v-if="!deleteSuccess" class="tab_one">
                <h3>{{language.deleteProfile_weValue}}</h3>
                <p :class="{'validate-error-color': selectTextErr}" v-show="selectTextErr">{{language.deleteProfile_selectTextErr}}</p>
                <select v-model="submitObj.text">
                    <option v-for="(value,index) in language.deleteProfile_selectArr" :value="index == 0 ? '': value" :disabled="index == 0"> {{value}} </option>
                </select>
                <h4>{{language.deleteProfile_itThere}}</h4>
                <textarea v-model="submitObj.comments" :placeholder="language.deleteProfile_commentsTip"></textarea>
                <h4>{{language.deleteProfile_ifYouStill}}</h4>
                <p v-show="passWordError" class='validate-error-color'>{{language.deleteProfile_passwordErr}}</p>
                <input v-model="submitObj.original_password" spellcheck="false" autocapitalize="off" placeholder="Password" type="password" autocomplete="new-password" name="password" maxlength="20">
                <div class="button_box">
                    <router-link :to="{name:'me'}">
                        <button class="btn">{{language.deleteProfile_backMe}}</button>
                    </router-link>
                    <p>
                        <button @click="ajaxCheckPassword">{{language.unify_delete}}</button>
                    </p>
                </div>
            </div>
            <div v-else class="tab_delete_success">
                <h5>
                {{repalceStr(language.deleteProfile_YouHaveResigned, [language.unify_siteName])}}
                </h5>
                <p v-if="!parseInt(userInfo.status.isGuest) && billStopDate" v-html="repalceStr(language.deleteProfile_goldPrompt, [billStopDate,language.unify_siteName])"></p>
                <p v-else v-html="repalceStr(language.deleteProfile_guestPrompt, [language.unify_siteName])"></p>
                <button @click="browserClear" class="btn">{{language.unify_ok}}</button>
            </div>
        </div>
        <publicDialog :props="dialogData"></publicDialog>
        <loading :props="{show:loadingAjax,type:'page'}"></loading>
    </div>
</template>
<script>
import * as API from '../api'
import publicDialog from './PublicDialog'
import validationMixin from '../plugins/my-validate'
import permissionPartMixin from '../common/permissionPartMixin'
import loading from './Loading'

export default {

    name: 'deleteProfile',

    mixins: [validationMixin],

    components: {
        publicDialog,
        loading,
    },

    activated() {
        this.dialogData = {}
    },

    data: function() {
        return {
            passWordError:false,
            loadingAjax: false,
            selectTextErr: false,
            deleteSuccess: false,
            billStopDate: '',
            dialogData: {},
            submitObj: {
                text: '',
                comments: '',
                original_password: '',
            }
        }
    },

    computed: {
        userInfo() {
            // console.log(this.$store.state.user.userInfo.status.isGuest)
            return this.$store.state.user.userInfo;
        },
    },

    methods: {

        browserClear() {
            permissionPartMixin.methods.permissionPartMixin_BrowserClear()
        },

        curCheckAll() {
            var cheSelect = this.curCheckSelect(),
                cheAll = this.checkAll();
            this.$forceUpdate();
            return cheSelect && cheAll;
        },

        curCheckSelect() {
            this.submitObj.text ? (this.selectTextErr = false) : (this.selectTextErr = true);
            return !this.selectTextErr;
        },

        curCheckPassword(){
            var bool = false;
            if(this.submitObj.original_password.length > 0){
                this.passWordError = false;
                bool = true;
            } else{
                this.passWordError = true;
            }
            return bool;
        },

        ajaxCheckPassword() {
            var tthis = this,
                passwordBool = tthis.curCheckPassword(),
                checkAllBoll = tthis.curCheckAll();
            if (passwordBool && checkAllBoll && !tthis.loadingAjax) {
                tthis.loadingAjax = true;
                API.check_password({
                    data: {
                        original_password: tthis.submitObj.original_password
                    },
                    success: function(data) {
                        if (typeof(data.errcode) == 'undefined') {
                            tthis.dialogData = {
                                position: 'middle',
                                type: 'confirm',
                                content: {
                                    info: tthis.language.deleteProfile_sureout,
                                },
                                callback: function() {
                                    tthis.submitData();
                                }
                            };
                        } else {
                            tthis.dialogData = {
                                position: 'top',
                                type: 'error',
                                content: {
                                    info: data.errmsg,
                                }
                            };
                        }
                    },
                    complete: function(data) {
                        tthis.loadingAjax = false;
                    }
                })
            }
        },

        submitData() {
            var tthis = this;
            if (tthis.curCheckAll() && !tthis.loadingAjax) {
                tthis.loadingAjax = true;
                API.disable_account({
                    data: tthis.submitObj,
                    success: function(data) {
                        if (typeof(data.errcode) == 'undefined') {
                            if (data.bill_stop_date) {
                                tthis.billStopDate = data.bill_stop_date;
                            }
                            tthis.deleteSuccess = true;
                        } else {
                            tthis.dialogData = {
                                position: 'top',
                                type: 'error',
                                content: {
                                    info: tthis.language.deleteProfile_secondPwdError,
                                }
                            };
                        }
                    },
                    complete: function(data) {
                        tthis.loadingAjax = false;
                    }
                })
            }
        },
    },
}

</script>
<style scoped>
.deleteProfile {
    padding-top: 44px;
    background: #f7f7f7;
}

.deleteProfile .body {
    padding-top: 10px;
    color: #999;
    font-size: 15px;
}

.deleteProfile .tab_delete_success {
    padding: 20px;
    font-size: 14px;
}

.deleteProfile .tab_delete_success h5 {
    font-weight: normal;
    font-size: 15px;
    padding-bottom: 12px;
}

.deleteProfile .tab_delete_success p {
    padding-bottom: 26px;
}

.deleteProfile .tab_delete_success b {
    font-weight: normal;
}

.deleteProfile .tab_delete_success button {
    width: 90%;
    display: block;
    margin: auto;
}

.deleteProfile .tab_one h3,
.deleteProfile .tab_one h4 {
    color: #999999;
    font-size: 13px;
    font-weight: normal;
    padding: 0 20px;
}

.deleteProfile .tab_one .button_box {
    padding: 30px;
    text-align: center;
}

.deleteProfile .tab_one .validate-error-color {
    padding: 0 20px 8px 20px;
}

.deleteProfile .tab_one .button_box p {
    padding: 14px 0;
}

.deleteProfile .tab_one .button_box p button {
    background: none;
    font-size: 15px;
    color: #999;
}

.deleteProfile .tab_one h3 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.deleteProfile .tab_one h4 {
    padding-top: 6px;
    padding-bottom: 6px;
    line-height: 18px;
}

.deleteProfile .tab_one input,
.deleteProfile .tab_one select,
.deleteProfile .tab_one textarea {
    font-size: 14px;
    width: 100%;
    height: 42px;
    border: 0;
    color: #555;
    background: #fff;
    border-radius: 0;
    text-indent: 20px;
    border: 1px solid #e8e9ec;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
}

.deleteProfile .tab_one textarea {
    height: 140px;
    padding: 15px 20px;
    text-indent: 0px;
    resize: none;
}

</style>
